<template>
  <section class="footer-wrap padding bg-black">
    <div class="width">
      <div class="card-box">
        <div class="card-item">
          <img class="logo" :src="Logo" alt="logo" title="logo" />
          <ul class="menu-box">
            <li v-for="(item, index) in menuList" :key="index" @click.stop="handledMenu(item)">{{ item.value }}</li>
          </ul>
        </div>
        <div class="card-item border-left">
          <h1>Stay in<br />Touch</h1>
          <p style="width: 60%" class="margin-top margin-bottom">
            Get regular updates about our new hires, technical and business milestones, and ideas in brain–functional ultrasound imaging technology.
          </p>
          <div class="card-box">
            <div class="card-item">
              <p class="input-box"><input v-model="email" class="bg-black" placeholder="ENTER EMAIL" /></p>
            </div>
            <div class="card-item auto">
              <button class="round primary" @click.stop="sendEmail">SUBMIT</button>
            </div>
          </div>
          <p class="send-tips">{{ message }}</p>
          <p class="margin-top">The world’s smallest functional ultrasound imaging system is now available; please contact us to learn more</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import HttpServer from "@/utils/http"
import { messageAPI } from "@/config/api"
import { MENU_DATA } from "@/constants"
import Logo from "@images/logo-w.png"

export default {
  name: "comFooter",
  data() {
    return {
      Logo,
      menuList: MENU_DATA,
      email: "",
      message: "",
      msgTimer: null,
    }
  },
  created() {
    this.buildMenu(this.menuList)
  },
  methods: {
    handledMenu(menu) {
      this.$router.push({
        path: menu.link,
      })
    },
    buildMenu(list) {
      list.map((item) => {
        item.text = this.$store.state.languageData[item.value] || ""
        if (item.child?.length) {
          this.buildMenu(item.child)
        }
      })
    },
    async sendEmail() {
      let msg = ""
      if (!this.email) {
        msg = "Please enter the correct email format."
      } else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.email)) {
        msg = "The email format you entered is incorrect. Please confirm and re-enter."
      }
      if (msg) {
        this.message = msg
        return
      }
      this.reset()
      const { code } = await HttpServer.post(messageAPI.saveMessage, {
        content: this.email,
      })
      if (code == 200) {
        this.message = "success"
        this.msgTimer = setTimeout(() => {
          this.reset()
        }, 3000)
      }
    },
    reset() {
      if (this.msgTimer) {
        clearTimeout(this.msgTimer)
        this.msgTimer = null
        this.message = ""
      }
    },
  },
  destroyed() {
    this.reset()
  },
}
</script>
<style lang="less" scoped>
.footer-wrap {
  padding: 10rem 0;
  .width {
    margin: auto;
  }
}
.logo {
  width: 10rem;
}
.border-left {
  padding-left: @normal * 4;
  border-left: 1px dashed @borderColor;
}
.card-box .card-box {
  align-items: center;
}
.card-box .card-item {
  margin: @normal 0;
}
.card-box .card-item .card-item {
  margin: @normal;
}
.menu-box {
  display: inline-block;
  margin: -3rem 0 0 15rem;
  li {
    padding: @normal @normal * 2;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: underline;
    font-size: @fsLevel5;
    &:hover {
      transform: scale(1.1);
    }
  }
}
.input-box {
  display: flex;
  align-items: center;
  span,
  input {
    display: block;
  }
  span {
    flex: none;
    margin-right: @normal;
  }
  input {
    padding: 0 @normal;
    line-height: @inputH;
    flex: 1;
    border-radius: @borderRdius;
    border: 0;
    outline: none;
  }
}
.send-tips {
  color: #ff4c4c;
}
</style>
